<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <title>地图的实现</title>
</head>

<body>

  <!-- 
    地图图表的使用方式
    百度地图api
     需要申请百度地图ask
    矢量地图
      需要准备矢量地图数据
   -->
  <!--  实现步骤
      echarts最基本的代码结构
      准备中国地图的矢量数据
      使用Ajax获取矢量地图数据
      在Ajax的回调函数中注册地图矢量数据 echarts.registerMap('chinaMap',矢量地图数据)
      配置geo的type为map,map为chinaMap
  -->

  <!-- 常用配置
    缩放拖动：roam
    名称显示：label
    初始缩放比例：zoom
    地图中心点：center
  -->

  <!-- 

    常见效果
    不同城市颜色不同
      1.显示基本的中国地图
      2.城市的空气质量数据设置给series
      3.将series下的数据和geo关联起来
        geoIndex:0,type:'map'
      4.结合visualMap配合使用
        min
        max
        inRange
        calculable
   -->

  <div style="width: 1000px;height: 700px;"></div>
  <script>
    var mChart = echarts.init(document.querySelector('div'));
    $.get('/china.json', function(res) {
      // console.log(res);

      // 获取空气质量的数据（使用随机数自动生产来模拟城市天气空气质量）
      var weatherData = [];

      for (var i of res.features) {
        var obj = {
          name: '',
          value: 0
        };
        console.log(i.properties.name);
        obj.name = i.properties.name;
        obj.value = Math.floor(Math.random() * 300 + 1);
        weatherData.push(obj);
      }

      // console.log(weatherData);


      // 注册地图的json数据
      echarts.registerMap('chinaMap', res);
      var option = {
        geo: {
          type: 'map',
          map: 'chinaMap',
          roam: true,
          label: {
            show: true
          },
          zoom: 1.2, //默认值为1
          // center: [113.280637, 23.125178] // 设置地图中心点
        },
        series: [{
          data: weatherData,
          geoIndex: 0,
          type: 'map'
        }],
        visualMap: {
          min: 1,
          max: 300,
          // 可以控制进行筛选
          calculable: true
        }
      };
      mChart.setOption(option);
    })
  </script>
</body>

</html>